<!DOCTYPE html>
<html>
<head>
<title>Physics Diagram</title>
</head>
<body>
<canvas id="physicsCanvas" width="600" height="450"></canvas>
<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // Style settings
    ctx.lineWidth = 2;
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    // Helper function to draw an arrow
    function drawArrow(fromX, fromY, toX, toY, headLength = 10) {
        const dx = toX - fromX;
        const dy = toY - fromY;
        const angle = Math.atan2(dy, dx);
        ctx.beginPath();
        ctx.moveTo(fromX, fromY);
        ctx.lineTo(toX, toY);
        ctx.stroke();
        ctx.beginPath();
        ctx.moveTo(toX, toY);
        ctx.lineTo(toX - headLength * Math.cos(angle - Math.PI / 6), toY - headLength * Math.sin(angle - Math.PI / 6));
        ctx.moveTo(toX, toY);
        ctx.lineTo(toX - headLength * Math.cos(angle + Math.PI / 6), toY - headLength * Math.sin(angle + Math.PI / 6));
        ctx.stroke();
    }

    // --- Main Drawing ---

    // Define coordinates and dimensions based on a layout that ensures proper connections.
    const groundY = 380;

    // Block C
    const C = { x: 150, y: 200, w: 280, h: 180 };

    // Pulley is at the top-right corner of C.
    const pulley = { x: C.x + C.w, y: C.y, r: 25 };

    // The string path is tangent to the pulley.
    // Horizontal part of the string is tangent to the top of the pulley.
    const h_string_y = pulley.y - pulley.r;
    // Vertical part of the string is tangent to the right of the pulley.
    const v_string_x = pulley.x + pulley.r;

    // Block A is positioned so its string connection point is on the horizontal string line.
    // Also, A must rest on top of C.
    const A = { w: 90, h: 50 };
    A.y = C.y - A.h; // A sits directly on C
    A.x = 180; // A's horizontal position on C

    // Block B is positioned so its string connection point is on the vertical string line.
    const B = { w: 60, h: 60 };
    B.x = v_string_x + 20; // Position B to the right of the vertical string
    B.y = C.y + 60; // B's vertical position

    // 1. Draw Ground
    ctx.beginPath();
    ctx.moveTo(80, groundY);
    ctx.lineTo(520, groundY);
    ctx.stroke();

    // 2. Draw Block C
    ctx.strokeRect(C.x, C.y, C.w, C.h);
    ctx.font = '24px "Times New Roman"';
    ctx.fillText('C', C.x + C.w / 2, C.y + C.h / 2 + 10);

    // 3. Draw Block A
    ctx.strokeRect(A.x, A.y, A.w, A.h);
    ctx.fillText('A', A.x + A.w / 2, A.y + A.h / 2);
    ctx.font = 'italic 22px "Times New Roman"';
    ctx.fillText('m', A.x + A.w / 2, A.y - 20);

    // 4. Draw Pulley
    ctx.beginPath();
    ctx.arc(pulley.x, pulley.y, pulley.r, 0, 2 * Math.PI);
    ctx.stroke();
    // Pulley axle
    ctx.beginPath();
    ctx.arc(pulley.x, pulley.y, 3, 0, 2 * Math.PI);
    ctx.fill();

    // 5. Draw Block B
    ctx.strokeRect(B.x, B.y, B.w, B.h);
    ctx.font = '24px "Times New Roman"';
    ctx.fillText('B', B.x + B.w / 2, B.y + B.h / 2);
    ctx.font = 'italic 22px "Times New Roman"';
    ctx.fillText('m', B.x + B.w + 25, B.y + B.h / 2);

    // 6. Draw String, ensuring it's tangent to the pulley
    const string_from_A_y = A.y + A.h / 2; // Y-coord where string leaves A
    ctx.beginPath();
    ctx.moveTo(A.x + A.w, string_from_A_y);
    ctx.lineTo(pulley.x, string_from_A_y); // Horizontal part to pulley's x-coord
    // Use arcTo to create a smooth, tangent curve around the pulley
    ctx.arcTo(pulley.x, pulley.y - pulley.r, pulley.x + pulley.r, pulley.y - pulley.r, pulley.r); // Round the top corner
    ctx.arcTo(pulley.x + pulley.r, pulley.y, pulley.x + pulley.r, pulley.y + pulley.r, pulley.r); // Round the right corner
    ctx.lineTo(v_string_x, B.y); // Vertical part down to B's level
    ctx.stroke();


    // 7. Draw Labels
    // Force F
    drawArrow(C.x - 80, C.y + C.h / 2, C.x - 10, C.y + C.h / 2);
    ctx.font = 'italic 24px "Times New Roman"';
    ctx.fillText('F', C.x - 105, C.y + C.h / 2);

    // Mass M
    ctx.fillText('M', C.x - 30, groundY - 25);

    // Friction coefficients
    ctx.font = 'italic 22px "Times New Roman"';
    ctx.fillText('μ≠0', A.x + A.w + 40, A.y + A.h + 5);
    ctx.fillText('μ=0', C.x + C.w + 50, groundY + 15);

    // 8. Draw Caption
    ctx.font = '24px "SimSun"';
    ctx.fillText('力图 2.8.1', 300, 425);

</script>
</body>
</html>